<template>
	<div id="nameWarp">
		<div class="nameWarp" v-for="(item,index) in content" :key='index'>
			<div class="firstName">
				<span>{{item.firstParentName}}</span>
				<span>{{item.counts}}台</span>
				<span>{{item.weightCount}}KG</span>
			</div>
			<ul class="childName">
				<li v-for="(item2,index2) in item.materialList" :key='index2'>
					<span>{{item2.materialName}}</span>
					<span>{{item2.counts}}台</span>
					<span>{{item2.weightCount}}KG</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { TopTips } from 'we-vue'
	import { getMteZhiJianInfo } from '../../config/api'
	export default{
		data() {
			return {
				carId:this.$route.query.carId,
				content:'',
			}
		},
		created(){
			getMteZhiJianInfo(this.carId).then(res=>{
				if(res.code==100){
					this.content = res.content
				}else{
					TopTips({
					  message: '暂无数据',
					  duration: 1200
					})
				}
			})
		}
	}
</script>

<style scoped="scoped" lang="css">
	.nameWarp,
		.childName {
			width: 100%;
			height: auto;
			overflow: hidden;
		}

		.nameWarp .firstName {
			width: 100%;
			height: 1.55rem;
			background: #eee;
			line-height: 1.55rem;
		}

		.childName li {
			width: 100%;
			height: 1.55rem;
			font-size: 0.75rem;
			line-height: 1.55rem;
			border-bottom: 1px solid #eee;
		}

		.firstName span:nth-of-type(1) {
			display: inline-block;
			float: left;
			width: 50%;
			padding-left: 1.1rem;
			box-sizing: border-box;
		}

		.firstName span:nth-of-type(2),
		.childName li span:nth-of-type(2) {
			display: inline-block;
			float: left;
			width: 50%;
			text-align: right;
			box-sizing: border-box;
			padding-right: 1.15rem;
		}
		.childName li span:nth-of-type(1) {
			display: inline-block;
			float: left;
			width: 50%;
			padding-left: 1.1rem;
			box-sizing: border-box;
		}
		.identity-type {
		    width: 100%;
		    height: 1.55rem;
		    background: #28c81e;
		    line-height: 1.55rem;
		    padding: 0 1.15rem;
		    color: #fff;
		}
</style>
